<template>
    <div>
<h3>房号列表</h3>
房型名称:<select v-model="queryInfo.TypeName">
                    <option :value="0">全部房型</option>
                    <option v-for="item in Free" :value="item.RoomId">{{item .RoomName}}</option>
                </select>&nbsp;
房号:<input type="text" v-model="queryInfo.NubCard"/>&nbsp;
时间:<input type="date" v-model="queryInfo.StartDate"/>-<input type="date" v-model="queryInfo.EndDate"/>&nbsp;
<input type="button" class="btn btn-primary" value="查询" @click="ShowNuber"/>
<br>
<input type="button" class="btn btn-primary" value="批量删除" @click="SumDrop"/>&nbsp;
<input type="button" class="btn btn-primary" value="批量上架" @click="SumEdit(1)"/>&nbsp;
<input type="button" class="btn btn-primary" value="批量下架" @click="SumEdit(0)"/>&nbsp;
<table class="table table-bordered">
    <tbody>
        <tr>
            <td>
                <input type="checkbox" v-model="chexked" @click="AllGo"/>
            </td>
            <td>编号</td>
            <td>房型名称</td>
            <td>房号</td>
            <td>备注</td>
            <td>状态</td>
            <td>创建时间</td>
            <td>操作</td>
        </tr>
        <tr v-for="item in Dream" :key="item.NubId">
            <td>
                <input type="checkbox" :value="item.NubId" v-model="ids" @change="Apex"/>
            </td>
            <td>{{item.NubId}}</td>
            <td>{{item.RoomName}}</td>
            <td>{{item.NubCard}}</td>
            <td>{{item.NubSay}}</td>
            <td>
                <span v-if="item.NubStage==1">上架</span>
                <span v-if="item.NubStage==0">下架</span>
            </td>
            <td>{{moment(item.CreateDate).format("YYYY-MM-DD")}}</td>
            <td>
                <input type="button" class="btn btn-primary" value="删除" @click="Drop(item.NubId)"/>&nbsp;
                <input type="button" class="btn btn-primary" value="修改" @click="Edit(item.NubId)"/>&nbsp;
                <span v-if="item.NubStage==1">
                    <input type="button" class="btn btn-primary" value="下架" @click="EditStage(item.NubId,0)"/>&nbsp;
                </span>
                <span v-if="item.NubStage==0">
                    <input type="button" class="btn btn-primary" value="上架" @click="EditStage(item.NubId,1)"/>&nbsp;
                </span>
            </td>
        </tr>
    </tbody>
</table>
    </div>
</template>

<script setup lang="ts">
import { ref,reactive,onMounted } from 'vue';
import { useRouter,useRoute } from 'vue-router';
import axios from 'axios';
import moment from 'moment';
import router from '@/router';
const Router=useRouter();
const Route=useRoute();
onMounted(()=>{
    TypeShow();
    ShowNuber();
})
let Dream:any=ref([]);
let queryInfo=reactive({
    NubCard:'',
    TypeName:0,
    StartDate:'',
    EndDate:'',
});
let Free:any=ref([])
///绑定房型下拉框
const TypeShow=()=>{
    axios({
    url:'/api/Type/SelectShow',
    method:'get',
    })
    .then((res)=>{
        console.log(res.data);
        Free.value=res.data
    })
    .catch((err)=>{
        console.log(err)
    })
}
const ShowNuber=()=>{
    axios({
    url:'/api/Nub/RoomNubShow',
    method:'get',
    params:queryInfo
    })
    .then((res)=>{
        console.log(res.data);
        Dream.value=res.data.list;
    })
    .catch((err)=>{
        console.log(err)
    })
}
let chexked=ref(false);
let ids=ref([])
const AllGo=()=>{
chexked.value=!chexked.value;
if(chexked.value==true){
    ids.value=Dream.value.map((item:any)=>{
        return item.NubId
    })
    console.log(ids.value)
}
else{
    ids.value=[]
}
}
const Apex=()=>{
if(Dream.value.length==ids.value.length){
    chexked.value=true;
}
if(Dream.value.length!=ids.value.length){
    chexked.value=false;
}
}
const SumDrop=()=>{
    if(ids.value.length==0){
        alert("至少选择一项！")
        return
    }
    var T=confirm("您确定删除吗？")
    if(T==true){
        axios({
    url:'/api/Nub/SumDrop',
    method:'delete',
    params:{
        ids:ids.value.toString()
    }
    })
    .then((res)=>{
        console.log(res.data);
        if(res.data==1){
            alert("删除成功！")
            ShowNuber();
        }
        else{
            alert("删除失败！")
            return;
        }
    })
    .catch((err)=>{
        console.log(err);
        ShowNuber();
    })
    }
    else{
        ShowNuber();
        chexked.value=false;
        ids.value=[];
    }
}
const SumEdit=(NubStage:any)=>{
    if(ids.value.length==0){
        alert("至少选择一项！")
        return
    }
    axios({
    url:'/api/Nub/SumEditSatage',
    method:'put',
    params:{
        ids:ids.value.toString(),
        NubStage:NubStage
    }
    })
    .then((res)=>{
        console.log(res.data);
        ShowNuber();
        chexked.value=false;
        ids.value=[];
    })
    .catch((err)=>{
        console.log(err);
        ShowNuber();
        chexked.value=false;
        ids.value=[];
    })
}
const Drop=(id:any)=>{
    var T=confirm("您确定删除吗？")
    if(T==true){
        axios({
        url:'/api/Nub/DropNup',
        method:'delete',
        params:{
            NubId:id
        }
        })
        .then((res)=>{
            console.log(res.data);
            if(res.data==1){
            alert("删除成功！")
            ShowNuber();
        }
        else{
            alert("删除失败！")
            return;
        }
        })
        .catch((err)=>{
            console.log(err);
    })
    }
    else{
        ShowNuber();
    }
}
const Edit=(id:any)=>{
    Router.push({
        path:'/nuberEdit',
        query:{id:id}
    })
}
const EditStage=(NubId:any,E:any)=>{
    axios({
    url:'/api/Nub/EditStage',
    method:'put',
    params:{
        NubId:NubId,
        NubStage:E
    }
    })
    .then((res)=>{
        console.log(res.data);
        ShowNuber();
    })
    .catch((err)=>{
        console.log(err);
        ShowNuber();
    })
}
</script>

<style scoped>

</style>